<template>
	<div class="auth-registry-wrap">
		<div class="title">注册</div>

		<Form :ref="validRef" :model="formData" :label-width="0">
			<!--				<FormItem prop="nickname" :rules="{required: true, message: '请填写'}">-->
			<!--					<Input v-model="formData.nickname" placeholder="请输入主体名称"/>-->
			<!--				</FormItem>-->

			<FormItem prop="mobile" :rules="[{required: true, message: '请填写'}, {min: 11, max: 11, message: '请输入正确的手机号'}]">
				<Input v-model="formData.mobile" placeholder="请输入手机号"/>
			</FormItem>

			<FormItem class="send-msg-code-item" prop="code" :rules="{required: true, message: '请填写'}">
				<Input v-model="formData.code" placeholder="请输入验证码"/>

				<Button :disabled="timer > 0" @click="handleSendBeforeVerify">{{computedSendCodeBtnText}}</Button>
			</FormItem>

			<FormItem class="password-item" prop="password" :rules="{validator: handleValidatorPwd}">
				<Input v-model="formData.password" placeholder="请输入密码" type="password" password autocomplete="new-password"/>
			</FormItem>

			<FormItem class="password-item" prop="confirmPassword" :rules="{validator: handleValidConfirmPassword}">
				<Input v-model="formData.confirmPassword" placeholder="请输入确认密码" type="password" password autocomplete="new-password"/>
			</FormItem>

			<FormItem class="button-item">
				<Button type="primary" class="registry" @click="submitHandler">完成注册</Button>

				<div class="text-btn" @click="$jump({name: 'login'})">已经有账号了？</div>
			</FormItem>
		</Form>
	</div>
</template>

<script>
import JBoot from "jboot-env";

export default JBoot.form({
	mixins: [require('./auth-base').default],

	data (){
		return {
			submitMethod: 'registry',
			confirmPasswordVisible: false,
		}
	},

	created() {
		this.$busCollect(
			this.$bus.on('auth.valid-code-img.success', this.handleGetCode)
		);
	},

	methods: {
		handleValidConfirmPassword (rule, value, callback){
			if(!value) return callback(new Error('请填写确认密码'));

			const {password} = this.formData;

			if(password !== value){
				callback(new Error('两次密码输入不一致'));
			}else{
				callback();
			}
		},

		handleSendBeforeVerify (){
			this.$getRef(this.validRef).validateField('mobile', result => {
				if(result) return;

				this.$bus.emit('auth.valid-code-img.open', {type: 'shopRegistry', mobile: this.formData.mobile});
			});
		},

		handleGetCode (imgCode){
			this.$apiWithModule('sendCode', {type: 'registry', mobile: this.formData.mobile, imgCode})
				.then(response => {
					this.$tips.success('验证码已发送');

					this.startTimer();
				});
		},

		submitSuccessHandler (){
			this.$tips.success('注册成功');

			this.$jump({name: 'login'}, true);
		}
	}
});
</script>

<style lang="scss" scoped>
::v-deep.auth-registry-wrap {
	& > .title{
		color: #333333;
		font-weight: bold;
		font-size: 16px;
		margin-bottom: 10px;
	}

	& .ivu-form-item.password-item > .ivu-form-item-content .ivu-input-wrapper{
		& .ivu-input-suffix{
			& > i{
				line-height: 40px;
				color: #333333;
				font-size: 20px;
				margin-right: 5px;
				cursor: pointer;
			}
		}
	}
}
</style>
